// 仅是
// import { StyleSheet, View, Text } from 'react-native'
// import { useEffect } from 'react';
// import { useAuth } from '../context/AuthProvider';
// import { AntDesign,MaterialCommunityIcons } from '@expo/vector-icons';

// const DeleteUser = ({ navigation }) => {
//     const { setUser } = useAuth()
//     useEffect(() => {
//         navigation.setOptions({
//             title: '设置',
//         })
//     }, [])
//     const del = () => {
//         navigation.navigate('Mine')
//         setUser({})

//     }
//     return (
//         <View>
//             <View style={styles.newsItem}>
//                 <View style={styles.icon}><MaterialCommunityIcons name="account-edit" size={30} color="black" /></View>
//                 <View style={styles.iconContent}><Text style={{ fontSize: 18 }} >修改信息</Text></View>
//             </View>
//             <View style={styles.newsItem}>
//                 <View style={styles.icon}><MaterialCommunityIcons name="account-switch" size={30} color="black" /></View>
//                 <View style={styles.iconContent}><Text style={{ fontSize: 18 }}>切换账户</Text></View>
//             </View>
//             <View style={styles.newsItem}>
//                 <View style={styles.icon}><AntDesign name="deleteuser" size={30} color="black" /></View>
//                 <View style={styles.iconContent}><Text style={{ fontSize: 18 }} onPress={del}>退出登录</Text></View>
//             </View>
//         </View>
//     )
// }

// const styles = StyleSheet.create({
//     newsItem: {
//         display: 'flex',
//         justifyContent: 'space-between',
//         height: 60,
//         borderBottomColor: '#ccc',
//         borderBottomWidth: 1
//     },
//     icon: {

//         marginTop: 15,
//         marginLeft: 25,
//     },
//     iconContent: {
//         width: 100,
//         height: 60,
//         marginLeft: 80,
//         marginTop: -28,
//     }
// })

// export default DeleteUser;

import { StyleSheet, View, Text,Modal,TextInput,ToastAndroid,TouchableOpacity } from 'react-native'
import { useEffect ,useState} from 'react';
import { useAuth } from '../context/AuthProvider';
import { AntDesign,MaterialCommunityIcons } from '@expo/vector-icons';
import { changeUser } from '../api/user';

const DeleteUser = ({ navigation }) => {
    const {user,setUser } = useAuth()
    const [modelVisible,setModalVisible] = useState(false);
    const [nickName, setNickName] = useState('')
    const [content, setContent] = useState('')
    useEffect(() => {
        navigation.setOptions({
            title: '设置',
        })
    }, [])
    // 退出登录
    const del = () => {
        navigation.navigate('Mine')
        setUser({})
    }
    // 修改信息
    const onFinish = () => {
        changeUser({...user,nickName:nickName,userSignature:content})
            .then(res=>{
                // console.log(res);
                if(res.code=="200"){
                    setTimeout(()=>{
                      ToastAndroid.show("修改成功", ToastAndroid.SHORT);
                      setUser(res.data)
                      setModalVisible(false);
                    },0)
                }
            });
    }
    return (
        <View>
            <View style={styles.newsItem}>
                <View style={styles.icon}><MaterialCommunityIcons name="account-edit" size={30} color="black" /></View>
                <View style={styles.iconContent}><Text style={{ fontSize: 18 }} onPress={()=>{setModalVisible(true)}} >修改信息</Text></View>
            </View>
            <View style={styles.newsItem}>
                <View style={styles.icon}><AntDesign name="deleteuser" size={30} color="black" /></View>
                <View style={styles.iconContent}><Text style={{ fontSize: 18 }} onPress={del}>退出登录</Text></View>
            </View>
            <Modal
            	animationType="slide"
                transparent={true}
                visible={modelVisible}
                onRequestClose={() => {
                	setModalVisible(!modelVisible);
                }}
            >
                <View style={styles.modalLayer}>
                    <View style={styles.modalContainer}>
                        <TextInput 
                            placeholder='修改昵称' 
                            onChangeText={text => setNickName(text)} //读取用户的输入,从TextInput里取值的唯一做法！
                            value={nickName}
                            style={[styles.inputStyle]}/>
                        <TextInput 
                            placeholder='修改签名' 
                            onChangeText={text => setContent(text)}
                            value={content}
                            style={[styles.inputStyle]}/>
                        <TouchableOpacity style={[styles.btnStyle]} >
                            <Text style={styles.loginText} onPress={onFinish}>提交修改</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        </View>
    )
}

const styles = StyleSheet.create({
    newsItem: {
        display: 'flex',
        justifyContent: 'space-between',
        height: 60,
        borderBottomColor: '#ccc',
        borderBottomWidth: 1
    },
    icon: {
        marginTop: 15,
        marginLeft: 25,
    },
    iconContent: {
        width: 100,
        height: 60,
        marginLeft: 80,
        marginTop: -28,
    },
    modalLayer: {
        backgroundColor: 'rgba(0, 0, 0, 0.45)',
        flex: 1,
        justifyContent: 'center',
        padding: 30,
    },
    modalContainer: {
        height: 240,
        width:400,
        backgroundColor: 'white',
        justifyContent: 'center',
        borderRadius: 8,
    },
    inputStyle: {
        width: '80%',
        height: 45,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: 15,
        borderColor: '#cacaca',
        borderWidth: 1,
        paddingLeft:15,
        fontSize:16,
      },
    btnStyle: {
        marginLeft: 'auto',
        marginRight: 'auto',
        height: 35,
        width: '80%',
        marginTop: 20,
        backgroundColor: '#4398ff',
        justifyContent: 'center', //沿主轴方向居中
    },
    loginText: {
        textAlign: 'center',//指定文本的对齐方式
        color: 'white',
        textAlignVertical: 'center',//设置文本垂直方向居中
        fontSize:16,
      },
})

export default DeleteUser;